<template>
   <div class="list">
      <!-- 顶部搜索 -->
      <div class="search">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="商家名称">
               <el-input v-model="formInline.keyword" placeholder="商家名称"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="__query">查询</el-button>
            </el-form-item>
         </el-form>
      </div>
      <!-- 顶部按钮 -->
      <div class="option">
         <el-button type="warning" plain @click="__exportExl">导出</el-button>
      </div>
      <!-- 表格数据 -->
      <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%" height="410">
         <el-table-column label="编号" width="55" type="index" :index="indexMethod">
         </el-table-column>
         <el-table-column label="商家名" width="200">
            <template slot-scope="{row}">{{ row.name }}</template>
         </el-table-column>
         <el-table-column label="logo" width="80">
            <template slot-scope="{row}">
               <div style="display: flex; justify-content: center; border-radius: 50%;">
                  <img style="width: 46px;" :src="row.logo" alt="">
               </div>
            </template>
         </el-table-column>
         <el-table-column label="注册人" width="140">
            <template slot-scope="{row}">{{ row.master }}</template>
         </el-table-column>
         <el-table-column label="联系方式">
            <template slot-scope="{row}">{{ row.contactLink }}</template>
         </el-table-column>
         <el-table-column label="身份证">
            <template slot-scope="{row}">{{ formatIdcardNumber(row.idCard) }}</template>
         </el-table-column>
         <el-table-column label="地址">
            <template slot-scope="{row}">
               <el-tooltip class="item" effect="dark" :content="row.address" placement="top">
                  <span>{{ truncateString(row.address) }}</span>
               </el-tooltip>
               <!-- {{ row.address }} -->
            </template>
         </el-table-column>
         <!-- <el-table-column label="创建时间">
            <template slot-scope="{row}">{{ row.createTime }}</template>
         </el-table-column> -->
         <!-- 操作按钮 -->
         <el-table-column label="操作" row-style="{color: '#1890ff'}">
            <template slot-scope="{row}">
               <span style="color: #409eff; margin-right: 6px; cursor: pointer;" @click="dialogFormVisible = true">
                  <i class="el-icon-view" style="margin-right: 4px;"></i><span>查看</span>
               </span>
            </template>
         </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
         </el-pagination>
      </div>
   </div>
</template>

<script>
import { getStoreListApi } from "@/api/admin"
import { saveAs } from 'file-saver'

export default {
   name: "",
   data() {
      return {
         formInline: {
            name: '',
            category: ''
         },
         userRole: ["普通用户", "商家", "管理员"],
         dialogFormVisible: false,
         formLabelWidth: '120px',
         tableData: null,
         multipleSelection: [], // 复选框的值
         pageNum: 1,
         pageSize: 10,
         total: 0,
      }
   },
   created() {
      // this.__getCustomerList()
      this.__getStoreList()
   },
   methods: {
      async __getStoreList() {
         let data = {
            pageNum: this.pageNum,
            pageSize: this.pageSize
         }
         const res = await getStoreListApi(data);
         if (!res) return;
         this.tableData = res.data.rows
         this.total = res.data.total
         // console.log("用户列表", this.tableData);
      },
      async __exportExl() {
         // const res = await exportProductApi();
         // if (!res) return;
         // // 处理成表格文件之后调用一个保存数据的方法，浏览器会自动下载
         // console.log(res);
         // saveAs(
         //    // Blob 对象表格一个不可变、原始数据的类文件对象
         //    // Blob 表示的不一定是JavaScript原生格式的数据
         //    // File 接口基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件
         //    // 返回一个新创建的Blob对象，其内容参数中给定的数组串联组成
         //    new Blob([res]),
         //    // 设置导出文件名称
         //    `商品列表_${new Date().getTime()}.xlsx`
         // )
      },
      formatIdcardNumber(number) {
         // 检查是否是15位或18位的身份证号码
         if (/^\d{15}$/.test(number) || /^\d{18}$/.test(number)) {
            // 使用正则表达式将中间八位替换为星号（适用于18位）
            if (number.length === 18) {
                  return number.replace(/^(\d{6})\d{8}(\d{4})$/, '$1********$2');
            }
            // 使用正则表达式将中间六位替换为星号（适用于15位）
            if (number.length === 15) {
                  return number.replace(/^(\d{6})\d{6}(\d{3})$/, '$1******$2');
            }
         }
         // 如果不是15位或18位的身份证号码，直接返回原始号码
         return number;
      },
      __query() {

      },
      async __delOne(row) { // 禁用
         const res = await delOneProductApi({ id: row.id });
         if (!res) return;
         this.__getProductList()
         this.$message({message: '删除成功', type: 'success'});
         console.log("删除单个商品：", row);
      },
      truncateString(str, length = 15) {
         // 如果字符串长度小于或等于长度限制，直接返回原字符串
         if (str.length <= length) {
            return str;
         }
         // 截取指定长度的字符串，并在末尾添加省略号
         const truncated = str.slice(0, length - 3) + '...';
         return truncated;
      },
      indexMethod(index) {
         // 计算编号
         return (this.pageNum - 1) * this.pageSize + index + 1;
      },
      toggleSelection(rows) {
         console.log("rows: " + rows);
         if (rows) {
            rows.forEach(row => {
               this.$refs.multipleTable.toggleRowSelection(row);
            });
         } else {
            this.$refs.multipleTable.clearSelection();
         }
      },
      handleSelectionChange(val) { // 每点击一次复选框 发生的事件
         this.multipleSelection = val;
         console.log("multipleSelection: ", this.multipleSelection);
      },
      handleSizeChange(val) {
         this.pageSize = val
         this.__getProductList()
         console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
         this.pageNum = val
         this.__getProductList()
         console.log(`当前页: ${val}`);
      }
   }
}
</script>

<style lang="less" scoped>
.option {
   margin: -4px 0 10px 0;
}

.pagination {
   display: flex;
   justify-content: flex-end;
   padding: 20px 40px;
}

.list {
   box-sizing: border-box;
}

.el-button {
   padding: 8px 10px !important;
}

.el-input__inner {
   height: 34px !important;
}
</style>
